<template>
  <div class="ymdiv">
    <div class="descriptions">
      <el-descriptions title="添加章节" direction="vertical" :column="3" :size="3" border>
        <el-descriptions-item label="章节名称"><el-input v-model="kcname" placeholder="名称" /></el-descriptions-item>
        <el-descriptions-item span="4" label="选择课件">
          <el-select v-model="value" multiple placeholder="Select" style="width: 240px"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ></el-descriptions-item>
        <el-descriptions-item span="4" label="备注">
          <el-input v-model="kcname" placeholder="备注" />
        </el-descriptions-item>
        <el-descriptions-item label="操作"><el-button type="primary">添加</el-button></el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { reactive, toRefs } from '@vue/reactivity';

export default defineComponent({
  setup() {
    const data = reactive({
      kcname: '',
      ispublic: '',
      value: '',
      options: [
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
        {
          value: 'Option4',
          label: 'Option4',
        },
        {
          value: 'Option5',
          label: 'Option5',
        },
      ],
    });
    const event = {};

    return {
      ...toRefs(data),
    };
  },
});
</script>
<style scoped>
.descriptions {
  padding: 20px;
}
</style>
